<!-- one div for entire tab -->

<style>
table
{
    border-collapse:collapse;
}
table, td, tr
{
    border:0px solid black;
}
table.lined, td.lined, tr.lined
{
    border-collapse:separate;
    border:1px solid black;
}
img
{
    vertical-align:middle;
}
button
{
    padding:0;
    margin:0;
}
#tooltip 
{
    font-size:10px;
    position: absolute;
    top: 0px;
    right:0px;
    width:100px;
    visibility: visible;
    color:black;
    background-color:#ffffff;
    border: 1px solid #66ccff;
    z-index: 10;
    padding:4px;
}
img.dot, img.enddot
{
    position: absolute;
    top: 0px;
    left:0px;
    visibility: visible;
    z-index: 8;
    padding:0px;
}
#showMapSpaceDiv
{
    position: relative;
    
}
#showMapSpaceView
{
    position: relative;
    
}
p.reply
{
    padding: 15px;
    border: 10px solid yellow;
    
}
</style>

<div style="clear: both; background-color:#aaaaaa; display: none;" id="setupMap">
<div id="topstatus"></div>

<!-- one div for each frame of wizard  CHOOSE-->
<div style="clear: both; background-color:#aaaaaa; display: block;" id="wizChooseOp">

    <br>
<table border=0 id="wizChooseOpTable" style="width:100%">
<tr><td>Do This:<br></td></tr><!-- Make Test Map -->
<tr><td><button type="button"  id="opMake" onclick="opMake()" style="width:100%">Make Test Map</button></td></tr>
<tr><td><button type="button"  id="opSave" onclick="opSave()" style="width:100%" disabled>Save Map</button></td></tr>
<!-- tr><td><button type="button"  id="opChoose" onclick="opChoose()" style="width:100%" disabled>List Maps</button></td></tr -->
<tr><td>Or Do This:<br></td></tr><!-- Map Manage -->
<tr><td><button type="button"  id="opLoad" onclick="opLoad()" style="width:100%">Load Map</button></td></tr>
<tr><td>Sometimes Do This:<br></td></tr><!-- View Map, Etc... -->
<tr><td><button type="button"  id="opStart" onclick="opStart()" style="width:100%">Manage Maps</button></td></tr>
<tr><td><button type="button"  id="opDelete" onclick="opDelete()" style="width:100%">Delete Map</button></td></tr>
<tr><td><button type="button"  id="opRename" onclick="opRename()" style="width:100%">Rename Map</button></td></tr>
<tr><td><button type="button"  id="opList" onclick="opList()" style="width:100%">List Maps</button></td></tr>
<tr><td><button type="button"  id="opView" onclick="opView()" style="width:100%">View Current Map</button></td></tr>
<tr><td><button type="button"  id="stopService" onclick="opStopService()" style="width:100%">STOP/SWITCH SERVICE</button></td></tr>
</table>
<br>

</div><!-- end of table -->

<!-- one div for each frame of wizard  LIST -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpList">
    <button type="button" onclick="executeList()">Refresh</button>
    List of Maps:<br>
    <div id="listSpace" style="border-style:solid;border-width:3px; border-color:black;
        width:300px; height:175px; overflow:auto">
    Click 'LIST' button to see... <br>
    
    </div><br>
    <div class="listLength"></div>
<br>

<button type="button" onclick="opCancel()">Return</button>

    
<br>

</div>

<!-- one div for each frame of wizard  LOAD -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpLoad">
    Loading a file automatically starts the map navigating software. 
    Then click 'RUN-NAV-TOOLS' to set start and stop coordinates.<br><br>
    IF the load option pull-down does not contain any maps, click the Force-Library 
    or Reload-List button.
    <button type="button" onclick='executeLibraryForce()'>FORCE LIBRARY</button>
    <button type="button" onclick='opLoad()'>RELOAD LIST</button><br>
    <hr>
    Load this file:
    <!-- form action="" -->
    <select id="selectSpaceLoad">
    <option value="none">None</option>
    </select><button type="button" onclick="executeLoad()">LOAD</button>
    <div class="listLength"></div>
    <!-- /form -->
<br>
<button type="button" onclick="executeRunNav()">RUN NAV TOOLS</button>
<button type="button" onclick='executeRunNavForce();'>FORCE NAV MANAGER</button><br>

<button type="button" onclick="opCancel()">Done</button>
<p id="wizOpLoadConfirm" style="display:none" class="reply">Your map loaded.</p>
<p id="wizOpLoadNavConfirm" style="display:none" class="reply">Nav functions have been started.</p>
    
</div>

<!-- one div for each frame of wizard  NEW -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpNew">
    <br>
    Make a test map here. This map will allow you to test saving and loading 
    functions.<br>
    <button type="button" onclick="executeNew()">NEW TEST MAP</button><br>
    <br>
    Start map app that will make and save one map. Map should be usable for
    actual gmapping.<br>
    <button type="button" onclick="executeMakeMapAndroid()">NEW G MAP</button><br><br>
<button type="button" onclick="opCancel()">Done</button>
<p id="wizOpNewConfirm" style="display:none" class="reply">New map ready.</p>
</div>
<!-- one div for each frame of wizard  DELETE -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpDel">
    <br>
    Delete this file:
    <!-- form action="" -->
    <select id="selectSpaceDelete">
    <option value="none">None</option>
    </select><button type="button" onclick="executeDelete()">DELETE</button><br>
    <!-- /form -->
<button type="button" onclick="opCancel()">Done</button>
    <p id="wizOpDelConfirm" style="display:none" class="reply">
    Your map was deleted. Refresh or click 'Close' to see new
    list: <div class="listLength"></div></p>
</div>
<!-- one div for each frame of wizard  RENAME -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpRename">
    Rename this file:
    <br>
    <!-- form action="" -->
    <button type="button" onclick='opRename()'>REFRESH</button><br>
    <select id="selectSpaceRename">
    <option value="none">None</option>
    </select>
    <input type="text" name="rename" id="inputSpaceRename">
    <button type="button" onclick="executeRename()">RENAME</button><br>
    <!-- /form -->
<button type="button" onclick="opCancel()">Done</button>
    <p id="wizOpRenameConfirm" style="display:none" class="reply">
    Your map was renamed. Refresh of click 'Done' to see new
    list</p>
</div>
<!-- one div for each frame of wizard  SAVE -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpSave">
    <br>
    If you want to save a map, make the map
    first with the 'G-MAP' option under 'Make-Map'.
    <hr>
    <br>
    Give your map a name:
    <input type="text" name="rename" id="inputSpaceSave">
    <button type="button" onclick="executeSave()">SAVE</button><br>
<button type="button" onclick="opCancel()">Done</button>
<p id="wizOpSaveConfirm" style="display:none" class="reply">Your map was saved.</p>
</div>
<!-- one div for each frame of wizard  DONE -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpDone">
<button type="button" onclick="">Done</button>
<p id="wizOpDoneConfirm" style="display:none">Your operation is done.</p>
</div>
<!-- one div for each frame of wizard  START ROBOT / CONFIG-->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpStart">
    
<br>
<button type="button" onclick='executeMapStart();'>FORCE MAP CLEAN</button><br><br>
    
<button type="button" onclick="opCancel()">Done</button><br>
<p id="wizOpStartConfirm" style="display:none" class="reply">The map manager is started.</p>
    
<p id="wizOpStartConfirmForce" style="display:none" class="reply">The map manager is cleaning.</p>
    
</div>
<!-- one div for each frame of wizard  VIEW MAP -->
<div style="clear: both; background-color:#aaaaaa; display: none;" id="wizOpView">
    <button type="button" onclick='getMapTopicView();'>Refresh Current Map</button>
    <div id="showMapSpaceView" style="border-style:solid;border-width:1px; border-color:black;
        width:300px; height:175px; overflow:auto; font-size:3px; padding:0px 0px 0px 0px;"><div 
        style="font-size:12pt;" id="showMapSpaceDiv"></div></div>


<br>
<!-- start of complicated nav div -->
    <div id="wizOpNavSettings" style="display:none">
    <table class="lined"><tr class="lined">
        <td class="lined"><!-- start location stuff -->
            <button type="button" onclick="chooseStart()">START COORDS</button>
        </td>
        <td class="lined"><!-- stop location stuff -->
            <button type="button" onclick="chooseStop()">STOP COORDS</button>
        </td>
    </tr>
    <tr class="lined">
        <td class="lined" valign="top"><!-- start location stuff -->
            click here for angle at start position <br>
            <img id="angleStart" onclick='makeangleStart()' src="//awesometelenp.appspot.com/static/bitmap/angle000.png">
            <br>
            <div id="xyStart"></div><br>
            Angle: <div id="angleStartDisplay">0</div>
        </td>
        <td class="lined" valign="top"><!-- stop location stuff -->
            click here for angle desired at end position <br>
            <img id="angleStop" onclick='makeangleStop()' src="//awesometelenp.appspot.com/static/bitmap/angle000.png">
            <br>
            <div id="xyStop"></div><br>
            Angle: <div id="angleStopDisplay">0</div>
        </td>
    </tr>
    <tr class="lined"><td class="lined" colspan="2">
    <button type="button" onclick="chooseClear()">NO COORDS</button>
    <button type="button" onclick="chooseAccept()">SEND ALL !</button>
    </td></tr>
    <tr class="lined"><td class="lined" colspan="2">
    <button type="button" onclick="executeNavStart()">SEND START</button>
    <button type="button" onclick="executeNavGoal()">SEND GOAL</button>
    </td></tr>
    </table>
    
    </div>
    
    
<!-- end of complicated nav div -->
<br>
<button type="button" onclick="opCancel()">Done</button>
<p id="wizOpViewConfirm" style="display:none" class="reply">Your map is shown.</p>
</div>
<!-- end of wizard -->
</div>
<!-- closing body tag -->
</body>
